<template>
	<!-- 展示全部订单的结构 -->
	<el-card shadow="always" :body-style="{ padding: '20px' }">
		<template #header>
			<span>挂号订单</span>
		</template>
		<!-- card body -->
		<!-- 选择框 -->
		<el-form ref="form" label-width="80px" :inline="true" size="default">
			<el-form-item label="就诊人">
				<el-select v-model="patientId" placeholder="选择所有患者" clearable filterable>
					<el-option v-for="(item, index) in patientArr" :key="index" :label="item.name" :value="item.id" />
				</el-select>

			</el-form-item>
			<el-form-item label="订单状态">
				<el-select v-model="orderStatus" placeholder="选择所有订单状态" clearable filterable>
					<el-option v-for="(item, index) in statusList" :key="index" :label="item.comment"
						:value="item.status" />
				</el-select>

			</el-form-item>
		</el-form>
		<!-- 表格 -->
		<el-table :data="orderArr" border stripe style="margin-bottom: 20px;width: 100%;">
			<el-table-column prop="reserveDate" label="就诊时间" />
			<el-table-column prop="hosname" label="医院" />
			<el-table-column prop="depname" label="科室" />
			<el-table-column prop="title" label="医生" />
			<el-table-column prop="amount" label="服务费" />
			<el-table-column prop="patientName" label="就诊人" />
			<el-table-column prop="param.orderStatusString" label="订单状态" />
			<el-table-column label="操作">
				<!-- 作用域插槽 -->
				<template #="{ row }">
					<div>
						<el-button @click="goDetail(row)">详情</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页器 -->
		<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
			:total="total" layout=" prev, pager, next,jumper,->,sizes,total" background>
		</el-pagination>
	</el-card>
</template>

<script setup lang="ts">
import { reqFindAll, reqStatusList, reqUserOrderInfo } from '@/api/user';
import {
	OrderStatusArr, OrderStatusResponse, PatientInfoArr, PatientInfoResponse, UserOrderInfo, UserOrderInfoArr,
	UserOrderInfoResponse
} from '@/api/user/type';
import { onMounted, ref, watchEffect } from 'vue';
import { useRouter } from 'vue-router';

defineOptions({
	name: "List"
})


// 当前的页码
let currentPage = ref<number>(1)
// 一页几条数据
let pageSize = ref<number>(10)
// 就诊人id
let patientId = ref<string>("")
// 订单状态
let orderStatus = ref<string>("")
// 订单数组
let orderArr = ref<UserOrderInfoArr>()
// 订单总个数
let total = ref<number>()
// 实例化路由器
const router = useRouter()
// 就诊人数组
let patientArr = ref<PatientInfoArr>()
// 订单状态数组
let statusList = ref<OrderStatusArr>()



// 获取所有就诊人
async function getFindAll() {
	let result: PatientInfoResponse = await reqFindAll()
	if (result.code == 200) {
		patientArr.value = result.data
	}
}
// 获取所有订单状态
async function getStatusList() {
	let result: OrderStatusResponse = await reqStatusList()
	if (result.code === 200) {
		statusList.value = result.data
	}
}
// 点击订单详情的回调
function goDetail(row: UserOrderInfo) {
	// 携带参数跳转至订单详情界面
	router.push({ path: "/user/order", query: { id: row.id } })
}

// 监听
/* watchEffect
回调会立即执行，不需要指定 immediate: true。
在执行期间，它会自动追踪 xxx.value 作为依赖（和计算属性类似）。
每当 xxx.value 变化时，回调会再次执行。有了 watchEffect()，我们不再需要明确传递 xxx 作为源值。
*/
watchEffect(async () => {
	let result: UserOrderInfoResponse = await reqUserOrderInfo(currentPage.value, pageSize.value, patientId.value, orderStatus.value)
	if (result.code === 200) {
		total.value = result.data.total
		orderArr.value = result.data.records
	}
})
// 挂载完毕后获取数据
onMounted(() => {
	// 获取所有就诊人
	getFindAll();
	// 获取所有订单状态
	getStatusList()
})
</script>

<style scoped></style>